
<template>
  <div class="Case">
    <div class="banner">
      <h1>为1000+企业提供整合营销服务</h1>
      <div class="spans">营销效果超出客户预期</div>
    </div>
    <div class="list">
      <div class="row">
        <div class="h-row" v-for="item in list" :key="item.did" @click="showDetail(item)">
          <div class="left">
            <img :src="item.avatar" alt />
          </div>
          <div class="right">
            <div class="title">{{ item.name }}</div>
            <div class="dian"></div>
            <div class="brief" :title="item.remark">{{ item.remark }}</div>
            <div class="more">
              <span>More</span>
              <span>→</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        :total="count"
      ></el-pagination>
    </div>
    <div class="pc-dialog">
      <el-dialog :title="detail.title" :visible.sync="isShowPcDetail" top="15vh" width="15.14rem">
        <div class="conten-body content quill-editor">
          <div class="ql-editor" v-html="detail.content"></div>
        </div>
      </el-dialog>
    </div>
    <div class="mo-dialog">
      <el-dialog :title="detail.title" :visible.sync="isShowMoDetail" width="7rem">
        <div class="conten-body content quill-editor">
          <div class="ql-editor" v-html="detail.content"></div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// @ is an alias to /src
export default {
  name: "Case",
  components: {},
  data() {
    return {
      isShowPcDetail: false,
      isShowMoDetail: false,
      winWidth: "",
      list: [
        {
          cover:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689053532,4230915864&fm=26&gp=0.jpg",
          title: "我是新闻标题",
          brief:
            "网站改版后整体跳出率降至50%;在线名营管理执行4个月后，品牌词首页呈现8条正面信线名营管理执行4个月后，品牌词首页呈现8条正面信线名营管理执行4个月后，品牌词首页呈现8条正面信"
        },
        {
          cover:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689053532,4230915864&fm=26&gp=0.jpg",
          title: "我是新闻标题",
          brief:
            "网站改版后整体跳出率降至50%;在线名营管理执行4个月后，品牌词首页呈现8条正面信"
        },
        {
          cover:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689053532,4230915864&fm=26&gp=0.jpg",
          title: "我是新闻标题",
          brief:
            "网站改版后整体跳出率降至50%;在线名营管理执行4个月后，品牌词首页呈现8条正面信"
        },
        {
          cover:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689053532,4230915864&fm=26&gp=0.jpg",
          title: "我是新闻标题",
          brief:
            "网站改版后整体跳出率降至50%;在线名营管理执行4个月后，品牌词首页呈现8条正面信"
        },
        {
          cover:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689053532,4230915864&fm=26&gp=0.jpg",
          title: "我是新闻标题",
          brief:
            "网站改版后整体跳出率降至50%;在线名营管理执行4个月后，品牌词首页呈现8条正面信"
        }
      ],
      count: 0,
      currentPage: 1,
      detail: {
        title: "",
        content: ""
      }
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    showDetail(item) {
      this.$router.push({
        path: "/CaseDetail",
        query: {
          did: item.did
        }
      });
      // this.detail.content = item.content;
      // this.detail.title = item.name;
      // if (this.winWidth > 1000) {
      //   this.isShowPcDetail = true;
      // } else {
      //   this.isShowMoDetail = true;
      // }
    },
    getList() {
      this.$post("/v1/customer/demo/list", {
        page: this.currentPage,
        pageSize: 10
      }).then(res => {
        if (res.code == 200) {
          const { data } = res;
          this.count = data.count;
          this.list = data.demos;
        }
      });
    }
  },
  mounted() {
    var winWidth = window.innerWidth;
    this.winWidth = winWidth;
    this.$parent.setNav(3, 0);
    this.getList();
  }
};
</script>
<style lang="less" scoped>
.Case {
  background: #eff7fe;
  .banner {
    height: 7rem;
    background-image: url("../../public/static/kehuanli-banne@2x.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 3rem;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    h1 {
      font-size: 0.6rem;
      color: #fff;
      text-align: center;
      margin-bottom: 0.62rem;
      font-weight: 600;
    }
    .spans {
      font-size: 0.36rem;
      color: #fff;
    }
  }
  .list {
    width: 15.1rem;
    margin: 0.8rem auto 0;
    padding-bottom: 1.4rem;
    .row {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .h-row {
        width: 7.31rem;
        display: flex;
        background: #fff;
        margin-bottom: 0.5rem;
        border-bottom: 2px solid transparent;
        box-shadow: 1px 1px 5px 0 rgba(29, 39, 165, 0.33);
        cursor: pointer;
        &:hover {
          border-bottom: 2px solid #1a72e6;
        }
        .left {
          width: 2.15rem;
          height: 2.62rem;
          img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
          }
        }
        .right {
          height: 2.62rem;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 0.42rem 0.47rem 0.35rem;
          text-align: left;
          box-sizing: border-box;
          .title {
            font-size: 0.28rem;
            font-weight: 600;
          }
          .dian {
            width: 0.52rem;
            height: 1px;
            background: #000000;
            margin: 0.2rem 0;
          }
          .brief {
            font-size: 0.18rem;
            margin-bottom: 0.3rem;
            line-height: 0.32rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .more {
            display: flex;
            color: #1a72e6;
            font-size: 0.14rem;
            span {
              &:first-child {
                padding-right: 0.1rem;
              }
            }
            img {
              width: 0.4rem;
              height: auto;
              margin-left: 0.1rem;
            }
          }
        }
      }
    }
  }
  /deep/.el-pager li {
    width: 0.5rem;
    height: 0.5rem;
    line-height: 0.5rem;
    background: #d4e5f3;
  }
  /deep/.el-pagination button {
    width: 0.5rem;
    height: 0.5rem;
    line-height: 0.5rem;
    background: #d4e5f3;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #1a72e6;
  }
  /deep/.el-dialog__header {
    height: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    line-height: 0.8rem;
    display: flex;
    align-items: center;
  }
  /deep/.el-dialog__title {
    display: inline-block;
    width: 100%;
    text-align: center;
  }
  /deep/.el-dialog__body {
    overflow-y: auto;
  }
  .conten-body {
    height: 9rem;
  }
  .page {
    text-align: center;
  }
  .content {
    font-size: 16px;
    /deep/img {
      max-width: 100%;
      height: auto;
    }
  }
}
@media screen and (max-width: 1000px) {
  .Case {
    .banner {
      h1 {
        font-size: 0.42rem;
        margin-bottom: 0.4rem;
      }
      .spans {
        font-size: 0.36rem;
      }
    }
    .list {
      width: 100%;
      padding: 0 0.2rem;
      box-sizing: border-box;
    }
    .conten-body {
      height: 8rem;
    }
    .page {
      box-sizing: border-box;
      width: 100%;
    }
  }
}
</style>